<template>
    <div>
<!--        面包屑-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">权限管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
<!--        卡片区-->
        <el-card>
            <el-row>
                <el-col :span="4">
                    <el-button type="primary" >添加角色</el-button>
                </el-col>
            </el-row>
<!--            列表-->
            <el-table
                    :data="roleList"
                    style="width: 100%;margin-bottom: 20px;min-width: 1366px;"
                    border>
<!--                展开列-->
                <el-table-column
                        type="expand">
                    <template #default="scope">
                        <el-row v-for="(item1,index1) in scope.row.children"
                                :class="['bdbottom',index1===0 ? 'bdtop':'',]"
                                :key="item1.id">
<!--                           一级权限 -->
                            <el-col :span="5"
                                    style="display: flex;align-items: center;" >
                                <el-tag closable
                                        @close="deleteRightById(scope.row,item1.id)">{{item1.authName}}</el-tag>
                                <i class="el-icon-caret-right"></i>
                            </el-col>
<!--                            二三级-->
                            <el-col :span="19">
<!--                                二级权限-->
                                <el-row v-for="(item2,index2) in item1.children"
                                        :class="[index2!==0 ? 'bdtop':'',]"
                                        :key="item2.id"
                                        style="display: flex;align-items: center;" >
                                    <el-col :span="4">
                                        <el-tag type="success"
                                                closable
                                                @close="deleteRightById(scope.row,item2.id)">{{item2.authName}}</el-tag>
                                        <i class="el-icon-caret-right"></i>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-tag type="warning"
                                                v-for="item3 in item2.children"
                                                :key="item3.id"
                                                closable
                                                @close="deleteRightById(scope.row,item3.id)">{{item3.authName}}</el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
<!--                索引列-->
                <el-table-column
                        type="index">
                </el-table-column>
                <el-table-column
                        prop="roleName"
                        label="角色名称"
                        min-width="180">
                </el-table-column>
                <el-table-column
                        prop="roleDesc"
                        label="角色描述"
                        min-width="180">
                </el-table-column>
                <el-table-column
                        min-width="180"
                        label="操作">
                    <template #default="scope">
                        <el-tooltip class="item" effect="dark"
                                    content="编辑权限"
                                    placement="top">
                            <el-button type="primary"
                                       size="small"
                                       icon="el-icon-edit"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark"
                                    content="删除权限"
                                    placement="top">
                            <el-button type="danger"
                                       size="small"
                                       icon="el-icon-delete"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark"
                                    content="分配权限"
                                    placement="top">
                            <el-button type="warning"
                                       size="small"
                                       icon="el-icon-setting"
                                       @click="showSetRightDialog(scope.row)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
<!--            分配权限dialog-->
            <el-dialog title="分配权限"
                       width="40%"
                       @close="closeSetRightDialog"
                       v-model="setRightDialogVisible">
<!--                权限树，dialog主体-->
                <el-tree
                        ref="rightTreeRef"
                        :data="rightsList"
                        show-checkbox
                        node-key="id"
                        :default-expanded-all="true"
                        :default-checked-keys="defKeys"
                        :props="defaultProps">
                </el-tree>
                <template #footer>
                    <el-button @click="closeSetRightDialog">取消</el-button>
                    <el-button type="primary" @click="allotRights">确定</el-button>
                </template>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
  export default {
    name: "RoleList",
    data(){
      return {
        roleList:[],
        setRightDialogVisible:false,//显示分配权限dialog
        rightsList:[],//权限列表
        defaultProps:{//权限树的配置
          children:'children',
          label:'authName',
        },
        defKeys:[],//默认选中的权限id数组
        roleId:'',//需要分配权限的角色id
      }
    },
    created() {
      this.getRoleList();
    },
    methods:{
      async getRoleList(){
        const {data:res} = await this.$http.get("/roles");
        console.log(res);
        if(res.meta.status !== 200){
          return this.$message.error(res.meta.msg);
        }
        this.roleList= res.data;
      },
      //通过id删除权限
      async deleteRightById(role,rightId){
        const confirmResult = await this.$confirm('确定删除此权限吗？','提示',{
          type:'warning',
          confirmButtonText:'确定',
          cancelButtonText:'取消',
        }).catch(err => console.log(err))
        if(confirmResult === 'confirm'){
          const {data:res} = await this.$http.delete(`/roles/${role.id}/rights/${rightId}`);
          if(res.meta.status===200){
            this.$message.success(res.meta.msg);
            console.log(res);
            //返回的数据中更新
            role.children = res.data;
          }else{
            return this.$message.error(res.meta.msg);
          }
        }else{
          return this.$message.info('用户取消操作')
        }

      },
      //显示分配权限的dialog
      async showSetRightDialog(role){
        //请求全部权限
        const {data:res} = await this.$http.get(`/rights/tree`);
        if(res.meta.status !== 200){
          return this.$message({
            type:'error',
            message:res.meta.msg,
          })
        }
        this.rightsList = res.data;
        //获取全部默认选中的权限
        this.getDefaultKeys(role,this.defKeys);
        //保存需要分配权限的角色id
        this.roleId = role.id;
        this.setRightDialogVisible = true;
      },
      //关闭dialog
      closeSetRightDialog(){
        this.defKeys = [];
        this.setRightDialogVisible = false;
      },
      //获取所有默认选中的节点
      getDefaultKeys(node,arr){
        if(!node.children){
          return arr.push(node.id);
        }else{
          node.children.forEach(item=>{
            this.getDefaultKeys(item,arr);
          })
        }
      },
      //分配权限
      async allotRights(){
        const keys = [...this.$refs.rightTreeRef.getCheckedKeys(),...this.$refs.rightTreeRef.getHalfCheckedKeys()];
        const idStr = keys.join(',');
        const {data:res} = await this.$http.post(`roles/${this.roleId}/rights`,{rids:idStr});
        if(res.meta.status !== 200){
          return this.$message.error(res.meta.msg);
        }else{
          this.$message.success(res.meta.msg);
        };
        this.closeSetRightDialog();
        this.getRoleList();
      },
    }
  }
</script>

<style scoped>
    .bdtop{
        border-top:1px solid #eee;
    }
    .bdbottom{
        border-bottom:1px solid #eee;
    }
</style>
